<template>
	<view>
		<view class="order" @click="Transfer(item)" v-for="(item,index) in orderList" :key="index">
			<view class="order-number">
				<view class="number-left">
					<image
						src="/uni_modules/yt-order-list/static/number.png"
						mode="widthFix"></image>
					<text>{{ item.orderId }}</text>
				</view>
				<view class="number-right" :class="item.status == 3 ? 'green':item.status == 2?'blue':'red'">
					{{ isState(item.status) }}
				</view>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/title.png"
					mode="widthFix"></image>
				<text style="font-size: 30rpx; color: #000000;" class="row1">{{ item.title }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/addrer.png"
					mode="widthFix"></image>
				<text>所属分类：</text>
				<text>{{ item.cate }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/maddres.png"
					mode="widthFix"></image>
				<text>联系方式：</text>
				<text>{{ item.name }}-{{ item.mobile }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/time.png"
					mode="widthFix"></image>
				<text>提交时间：</text>
				<text>{{ item.time }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yt-order-list",
		props: {
			orderList: {
				type: Array,
				default: () => []
			},
			alias:{
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			/**
			 * 订单状态
			 */
			isState(state) {
				if (state == 3) {
					return '已完成'
				} else if (state == 2) {
					return '处理中'
				} else {
					return '待处理'
				}
			},
			/**
			 * @method Transfer
			 * 订单转派
			 * @param {Object} id
			 */
			Transfer(id){
				this.$emit("Transfer",id)
			},
			/**
			 * @method jieOrder
			 * 接单
			 * @param {Object} id
			 */
			jieOrder(id){
				this.$emit("jieOrder",id)
			},
			/**
			 * @method callUser
			 * 联系
			 * @param {Object} id
			 */
			callUser(id){
				this.$emit("callUser",id)
			}
		}
	}
</script>

<style lang="scss">
	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.blue {
		color: #4b5eeb;
	}

	.order {
		width: 100%;
		// height: 200rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		margin-bottom: 25rpx;

		.order-number {
			width: 100%;
			color: #c73614;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
				}
			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #56caa3;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}
			}
		}
	}
</style>